<template>
    <view class="page">
        <view class="page-flex-top">
            <view class="search">
                <input type="text" placeholder="搜索会员单位" placeholder-style="color:#B5B5B5;" v-model="keyword">
                <icon class="input-icon" type="search" size="20"></icon>
            </view>
            <view class="level-sort">
                <view class="level-range">
                    <picker class="item-picker" mode="selector" :value="levelItem" :range="levelList" @change="levelChange">
                        <text>{{levelItem==''?'级别':levelList[levelItem]}}</text>
                        <img :src="File_Url+'bottom-grey.png'" />
                    </picker>
                </view>
                <view class="sort-range">
                    <picker class="item-picker" mode="selector" :value="sortItem" :range="sortList" @change="sortChange">
                        <text>{{sortItem==''?'分类':sortList[sortItem]}}</text>
                        <img :src="File_Url+'bottom-grey.png'" />
                    </picker>
                </view>
            </view>
        </view>
        <view class="page-member-list">
            <view class="null" v-if="dataList.length==0">
                暂无会员单位入驻~
            </view>
            <view class="page-member-item" v-for="(item,index) in dataList" :key="index" @click="skipMemberDetail(item.id)">
                <view class="item-top">
                    <view class="item-left">
                        <img mode="aspectFit" :src="item.logo_url" />
                        <img class="icon" :src="File_Url+'vip-icon.png'" />
                    </view>
                    <view class="item-right">
                        <view class="item-name">{{item.name}}</view>
<!--                        <view class="item-desc" v-if="item.classify_Info==null&&item.unit_grade_Info==null" v-html="item.introduction"></view>-->
                        <view class="item-tip" v-if="item.classify_Info!=null||item.unit_grade_Info!=null">
                            <view class="sort" v-if="item.classify_Info!=null"><view class="icon"></view>{{item.classify_Info.name}}</view>
                            <view class="level" v-if="item.unit_grade_Info!=null">{{item.unit_grade_Info.name}}</view>
                        </view>
                        <view class="item-desc" v-html="item.introduction"></view>
                    </view>
                </view>
<!--                <view class="item-bottom" v-if="item.classify_Info!=null||item.unit_grade_Info!=null">-->
<!--                    <view class="item-desc" v-html="item.introduction"></view>-->
<!--                </view>-->
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "memberUnit",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                keyword:'',
                dataList: [],
                page: 1,
                total: 0,
                levelList: ['全部'],
                levelItem: '',
                level:[''],
                sortList: ['全部'],
                sortItem: '',
                sort: ['']
            }
        },
        onShow(){
          this.getMemberUnitList();
          this.getUnitClassify();
          this.getUnitGradeList();
        },
        //触底叠加
        onReachBottom(){
            if (this.total < this.dataList.length){
                this.page++;
                this.getMemberUnitList();
            }
        },
        methods:{
            //获取会员单位列表
            async getMemberUnitList(){
                let params = {
                    keyword: this.keyword,
                    limit: 10,
                    page: this.page,
                    classify_id: this.sort[(this.sortItem==''?0:this.sortItem)],
                    unit_grade_id: this.level[(this.levelItem==''?0:this.sortItem)]
                }
                const res = await this.$api.getMemberUnitList(params);
                if (res.data.level == 'success'){
                    let str = res.data.data;
                    for(let i =0; i < str.length; i++){
                        if (str[i].introduction != null){
                            str[i].introduction = str[i].introduction.replace(/<img[^>]*>/gi, function(match, capture){
                                return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
                            });
                            str[i].introduction = str[i].introduction.replace(/\<img/gi, '<img style="display:none" ');
                        }
                    }
                    if (this.page == 1) {
                        this.dataList = str
                    }else{
                        this.dataList = this.dataList.concat(str);
                    }
                    this.total = res.data.page_info.total;
                }
            },
            //获取单位分类
            async getUnitClassify(){
                let params = { type:'unit' };
                const res = await this.$api.getClassify(params);
                if (res.data.level == 'success'){
                    // console.log(res)
                    res.data.data.forEach(item =>{
                        this.sortList.push(item.name);
                        this.sort.push(item.id)
                    })
                }
            },
            //获取单位等级
            async getUnitGradeList(){
              const res = await this.$api.getUnitGradeList();
              if (res.data.level == 'success'){
                  res.data.data.forEach(item =>{
                      this.levelList.push(item.name);
                      this.level.push(item.id)
                  })
              }
            },
            levelChange(e){
                this.levelItem = e.detail.value;
            },
            sortChange(e){
                this.sortItem = e.detail.value;
            },
            //跳转到单位详情
            skipMemberDetail(id){
                uni.navigateTo({
                    url: '/pages/memberUnit/MemberDetail/MemberDetail?memberId='+id
                })
            }
        },
        watch:{
            keyword(newValue, oldValue){
                this.getMemberUnitList()
            },
            sortItem(){
                this.getMemberUnitList()
            },
            levelItem(){
                this.getMemberUnitList()
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        padding-top: 180rpx;
        min-height: calc(100vh - 180rpx);
    }
    .page-flex-top{
        position: fixed;
        top: 0;
        left: 0;
        height: 180rpx;
        width: 100vw;
        background: #ffffff;
        .search{
            padding: 20rpx 40rpx;
            position: relative;
            height: 60rpx;
            input{
                width: calc(100% - 84rpx);
                padding: 10rpx 10rpx 10rpx 70rpx;
                font-size: 28rpx;
                line-height: 40rpx;
                background: rgba(219, 219, 219, 0.2);
                border: 2rpx solid rgba(219, 219, 219, 0.3);
                border-radius: 30rpx;
                color: #B5B5B5;
            }
            .input-icon{
                position: absolute;
                top: 30rpx;
                left: 60rpx;
            }
        }
        .level-sort{
            background: #F8F8F8;

            @include flex(flex-start);
            flex-direction: row;
            view{
                width: 50%;
            }
            .item-picker{
                padding:20rpx 0;
                @include flex();
                flex-direction: row;
                text{
                    font-size: 28rpx;
                    line-height: 40rpx;
                    height: 40rpx;
                    color: #999999;
                }
                img{
                    width: 30rpx;
                    height: 34rpx;
                    padding: 3rpx;
                    vertical-align: middle;
                }
            }
        }
    }
    .page-member-list{
        background: #FFFFFF;
        .page-member-item{
            border-bottom: 1rpx solid #E5E5E5;
            padding: 30rpx;
            .item-top{
                @include flex(flex-start,flex-start);
                flex-direction: row;
                .item-left{
                    width: 130rpx;
                    height: 130rpx;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                        /*border-radius: 360rpx;*/
                    }
                    .icon{
                        position: absolute;
                        right: 0rpx;
                        width: 40rpx;
                        height: 40rpx;
                        bottom: 0;
                    }
                }
                .item-right{
                    margin-left: auto;
                    width: calc(100% - 150rpx);
                    /*height: 200rpx;*/
                    @include flex(center,flex-start);
                    flex-direction: column;
                    .item-name{
                        height: 60rpx;
                        line-height: 60rpx;
                        font-weight: bold;
                        font-size: 28rpx;
                        @include ellipsis(1);
                        margin-bottom: 10rpx;
                    }
                    .item-desc{
                        max-height: 74rpx;
                        line-height: 37rpx;
                        padding-top: 30rpx;
                        font-size: 24rpx;
                        width: 100%;
                        color: #666666;
                        @include ellipsis(2);
                    }
                    .item-tip{
                        height: 70rpx;
                        line-height: 70rpx;
                        font-size: 24rpx;
                        width: 100%;
                        margin-top: auto;
                        @include flex(flex-start,flex-end);
                        flex-direction: row;
                        .sort{
                            @include flex(flex-start);
                            flex-direction: row;
                            color: #999999;
                            .icon{
                                width: 20rpx;
                                height: 20rpx;
                                background: #3782FF;
                                border-radius: 360rpx;
                                margin-right: 20rpx;
                            }
                        }
                        .level{
                            margin-left: auto;
                            color: #3782FF;
                        }
                    }
                }
            }
            .item-bottom{
                padding-top: 30rpx;
                .item-desc{
                    max-height: 74rpx;
                    line-height: 37rpx;
                    font-size: 24rpx;
                    color: #666666;
                    @include ellipsis(2);
                }
            }
        }
        .page-member-item:last-child{
            border-bottom: none;
        }
    }
</style>